<template>
  <div class="wrapper p-3">
    <div class="d-flex align-items-center  p_relative" style="z-index: 1000">
      时间维度：
      <el-select class="w70 mr-3" v-model="timeType" slot="prepend" placeholder="请选择" size="small" >
      <el-option label="时" value="hour"></el-option>
      <el-option label="日" value="date"></el-option>
      </el-select>
      选择日期：
      <el-date-picker v-model="time" size="small" class="w150" v-show="timeType=='hour'" type="date" value-format="yyyy-MM-dd" placeholder="选择日" @change="query"></el-date-picker>
      <el-date-picker v-model="time2" size="small" class="w250" v-show="timeType=='date'" type="daterange" range-separator="至" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期"  @change="query"></el-date-picker>
      <el-button slot="append" class="ur-btn ur-btn-primary ml-2" @click="query">查询</el-button>
    </div>
    <div>
      <div id="myChart2" style="height:350px;margin-top: -30px;" ref="echarts"></div>
    </div>
  </div>
</template>

<script>
  import api from 'api/api'
  import echarts from 'echarts'
  export default {
    components: {},
    props: {
      pole:null
    },
    data() {
      return {
        timeType:'hour',
        time:null,
        time2: api.getMonthTime(),
        myChart2:null
      }
    },
    watch: {
      timeType(val){
        if(val=='hour'){
          this.time= api.formatDate(new Date((new Date()).getTime()-(24*3600*1000)))
        }else {
          this.time2= api.getMonthTime()
        }
        this.query()
      }
    },
    computed: {},
    methods: {
      initChart() {
        if(this.myChart2) return
        this.myChart2 = echarts.init(document.getElementById('myChart2'))
        let chartOption = {
          legend: {bottom:0},
          // title: {text: '电能统计'},
          legend: {data: '电能'},
          tooltip: {
            trigger: 'axis',
            axisPointer: {type: 'shadow'},
            formatter:function (params) {
              if(params[0]['axisValueLabel'].indexOf('-')==-1){
                return '时间：'+params[0]['axisValueLabel']+':00<br/>电能：'+params[0]['data']+'Kwh'
              }else{
                return '日期：'+params[0]['axisValueLabel']+'<br/>电能：'+params[0]['data']+'Kwh'
              }
            }
          },
          color:['#F76F6C'],
          grid:{
            bottom:30 ,
            right:20,
            left:55
          },
          xAxis: {
            nameLocation:'start',
            type: 'category',
            // axisLabel: {textStyle: {color: '#fff',}}
          },
          yAxis: {
            type: 'value',
            axisLabel:{
              formatter:'{value}Kwh'
            }
          },
          series: [
            {
              type: 'line',
              symbolSize: 5,
            },
          ]
        }
        this.myChart2.setOption(chartOption)
        this.query()
      },
      query(){
        debugger
        let url,data
        if(this.timeType=='hour'){
          url='/Monitor/QueryNBDayEnergy'
          data={tnDevAddr:this.pole.PoleDevAddr,date:this.time}
        }else{
          url='/Monitor/QueryNBEnergy'
          data={tnDevAddr:this.pole.PoleDevAddr,sdate:this.time2[0],edate:this.time2[1]}
        }
        api.fetchSimple(url,data)
          .then(r=>{
            let res=r.data
            let series=[],xData=[]

            if(this.timeType=='date'){
              if(!res||!res.length){
                 this.$message.success({showClose:true,message:'未查询到数据'})
              }else {
                res.map((v,index,arr)=>{
                  series.push(v.E)
                  xData.push(api.formatDate(new Date(v.Date)))
                })
              }
            }else{
              if(!res){
               this.$message.success({showClose:true,message:'未查询到数据'})
              }else{
                for(let key in res){
                  if(key.split('E').length>1&&key.split('E')[1]!=''){
                    series.push(res[key])
                    xData.push(key.split('E')[1])
                  }
                }
              }
            }
            this.myChart2.setOption({
              xAxis:{data: xData},
              series:{name:'电能', data: series}
            })
          })
      }
    },
    created() {
      this.time=api.formatDate(new Date((new Date()).getTime()-(24*3600*1000)))
    },
    mounted() {
      this.initChart()
    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
